<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM案例</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    
<div class="father">
    <div class="action">
    <input type="text">
    <button type="button" class="btn btn-primary">Primary</button></div>
    <ul>
    </ul>
</div>
<script>
//封装一个函数：
//============================================
//获取标签的值   querySelector
var buttonElement=document.querySelector('button');
var inputelement=document.querySelector('input');
var ulelement=document.querySelector('ul');
//获取本地数据  localStorage.getItem() 
var list=JSON.parse(localStorage.getItem('todolist')) || [];//把todolist转化成数组
//显示在页面中
list.forEach(function(value){
    var lielement=document.createElement('li');
    lielement.className='itmes';//赋予class 属性
    lielement.innerText=value;
    ulelement.appendChild(lielement);//appendChild   添加元素
})
function addItmes(){
    //创建一个元素  createElement
    var lielement=document.createElement('li');
    lielement.className='itmes';//赋予class 属性
    lielement.innerText=inputelement.value;
    ulelement.appendChild(lielement);//appendChild   添加元素
//---------------------------------------------------------------->
    list.push(inputelement.value); //. push()  添加input输入框的值到数组中
    //存储到本地    localStorage.setItem()      参数只接受字符串
    //JSON.stringify()  将数组转化为字符串
    //JSON.parse()      将字符串转化为数组
    localStorage.setItem('todolist',JSON.stringify(list));  
    }
function deleteitmes(e){
        //.target 获取当前的点击 .tagName 获取标签名
        if(e.target.tagName==='LI'){//判断值是否为LI标签
        e.target.remove();//删除点击的标签
    }
//-------------------------------------------------------------------->
    //遍历数组的值 如果和点击的文本值一样则删除
    list.forEach(function(value,index){
        if(value===e.target.innerText){
            list.splice(index,1);//splice(下标,步长) 删除数组的值  第一个参数为0时截取<<<====>>>不为零时则作为下标开始删除
        }
    })
    localStorage.setItem('todolist',JSON.stringify(list));
 }
//添加事件
buttonElement.addEventListener('click',addItmes);
//给所有的ul 添加删除事件
ulelement.addEventListener('click',deleteitmes);
</script>
</body>
</html>